<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>失物招领</title>
  <link rel="stylesheet" href="<c:url value='/resource/wechat/css/frozen.css'/>">
  <link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/css/main.css'/>" />
  <script src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
  <script src="<c:url value='/resource/js/jquery.form.min.js'/>"></script>
  <script src="<c:url value='/resource/js/iscroll.js'/> "></script>
  <style type="text/css" media="all">
    body {
      background: #FFFFFF;
      font-size: 1rem;
    }

    body, p, div, ul, li, a {
      padding: 0;
      margin: 0;
    }

    .swzl_ul li .li_rt{margin-left: 10px; float: left; }

    a {
      color: #333333;
      text-decoration: none;
    }

    .p_header, .p_footer {
      position: fixed;;
      width: 100%;
      height: 3.5rem;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: 9998;
      line-height: 3.5rem;
    }

    .p_header {
      top: 0;
      left: 0;
      right: 0;
      border-bottom: 1px #DDD solid;
    }

    .p_header a {
      color: #527aff;
      text-decoration: none;
      font-weight: bold;
    }

    .p_back {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 16%;
      text-align: center;
      height: 100%;
      background: url('<c:url value="/resource/images/weixin/icon_back.png"/>') 8px 10px no-repeat;
      background-size: 35px;
    }

    .p_title {
      position: absolute;
      text-align: center;
      font-size: 1.1rem;
      font-weight: 600;
      left: 16%;
      right: 16%;
    }

    .p_opt {
      position: absolute;
      right: 0;
      top: 0;
      width: 16%;
      height: 100%;
      text-align: center;
      font-size: 1.1rem;
      font-weight: 600;
    }

    .p_footer {
      bottom: 0;
      left: 0;
      right: 0;
      border-top: 1px #ddd solid;
      text-align: center;
    }

    .op_add {
      background: url("<c:url value='/resource/images/weixin/icon_add.png'/>") 50% 50% no-repeat;
      width: 100%;
      height: 3.5rem;
      display: block;
      text-align: center;
      background-size: 32px;
    }

    .op_edit {
      background: url("<c:url value='/resource/images/weixin/icon_edit.png'/>") 50% 50% no-repeat;
      height: 3.5rem;
      display: block;
      text-align: center;
      background-size: 25px;
    }

    #pr_wrapper {
      top: 8rem;
      bottom: 0rem;
      position: absolute;
      z-index: 1; /*left: -9999px;*/
      width: 100%;
      overflow: auto;
    }

    #pr_scroller {
      position: absolute;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      width: 100%;
      padding: 0;
    }

    #pr_scroller ul {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      text-align: left;
    }

    #pr_list_head, #pr_list_foot {
      margin: 0;
      padding: 0;
      height: 3rem;
      line-height: 3rem;
      width: 100%;
      border: none;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      font-size: 0.95rem;
      color: #aba0a0;
    }

    #pr_list_head {
      border-bottom: 1px solid #ccc;
    }

    #pr_list_head span, #pr_list_foot a {
      display: block;
      height: 3rem;
      width: 7.5rem;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      font-weight: normal;
      text-decoration: none;
      color: #aba0a0;
    }


  </style>
  <script type="text/javascript">

    var keywords="";
    $(function() {
      $(".search_main_rt input").click(function(){
        keywords = $(".search_main_lf input[type='text']").val();
        $("#form1").ajaxSubmit({
            type : "post",
            url : '<c:url value="/api/lost/list"/>',
            data : {
              "numPerPage" : 10,
              "pageNum" : 1,
              "keywords" : keywords
            },
            dataType : "json",
            success : function(data){
              var _html = "";
              var _data = data.data.list, _len = _data.length;

              for(var i = 0 ; i < _len ; i++){
                var _item = _data[i];

                /*var imageUrl = _item.image == null ?  '<c:url value="/resource/images/weixin/no_img.png"/>' : "data:image/jpg;base64,"+_item.image;
                 var infoType = _item.infoType == 1 ? "<h3 class='lost'>" : "<h3 class='found'>";*/
                var url = '<c:url value="/api/lost/details/#"/>'.replace("#",_item.guid);
                var name = _item.lostname==null?"暂无":_item.lostname;
                var time = _item.crttimestr==null?"未知时间":_item.crttimestr;
                var address = _item.lostaddress==null?"暂无":_item.lostaddress;
                _html += "<li><div class='li_rt'><p><a href='"+url+"'>物品名称："+ name+"</a></p>"+
                        "<p><a href='"+url+"'>发布日期："+time+"</a></p><p><a href='"+url+"'>事发地点："+address+"</a></p></div></li>";
              }
              $("#pr_list_body").html(_html);
              _hasNext = data.hasNext;
              $(_footer).find("a").html(_hasNext ? "加载更多" : "已加载全部");
            }
        });
      });
    });

    var myScroll, _pageIndex = 1, _hasNext = true, _header, _headerOffset = 0, _footer, _footerOffset = 0, generatedCount = 0;
    function pullRefresh() {

      var obj = document.getElementById("pr_list_head").children[0], _ori_cls = obj.className, _cls = obj.className + " load";
      obj.className = _cls;
      obj.innerHTML = "正在加载";
      _pageIndex = 1;
      $.post("<c:url value='/api/lost/list'/>", {'numPerPage': 10, 'pageNum': 1 , 'keywords':keywords}, function (resp) {
        if (resp) {
          var _wrap = $("#pr_list_body"), _data = resp.data.list, _len = _data.length;
          var _html = "";

          console.info(_data);
          for (var index = 0; index < _len; index++) {
            var _item = _data[index];
            /*var imageUrl = _item.image == null ?  '<c:url value="/resource/images/weixin/no_img.png"/>' : "data:image/jpg;base64,"+_item.image;
             var infoType = _item.infoType == 1 ? "<h3 class='lost'>" : "<h3 class='found'>";*/
            var url = '<c:url value="/api/lost/details/#"/>'.replace("#",_item.guid);
            var name = _item.lostname==null?"暂无":_item.lostname;
            var time = _item.crttimestr==null?"未知时间":_item.crttimestr;
            var address = _item.lostaddress==null?"暂无":_item.lostaddress;
            _html += "<li><div class='li_rt'><p><a href='"+url+"'>物品名称："+ name+"</a></p>"+
                    "<p><a href='"+url+"'>发布日期："+time+"</a></p><p><a href='"+url+"'>事发地点："+address+"</a></p></div></li>";
          }
          $(_html).appendTo(_wrap.empty());
          obj.className = _ori_cls;
          obj.innerHTML = "加载成功";
          _hasNext = resp.hasNext;
          $(_footer).find("a").html(_hasNext ? "加载更多" : "已加载全部");
          setTimeout(function () {
            myScroll.refresh();
            obj.innerHTML = "下拉刷新";
          }, 600);
        }
      }, "json");
    }


    function changeTime(time){
      var newTime = new Date(time);
      var rTime=newTime.getFullYear()+"年";
      if(newTime.getMonth()+1<10){
        rTime+="0"+(newTime.getMonth()+1)+"月";
      }else{
        rTime+=(newTime.getMonth()+1)+"月";
      }if(newTime.getDate()<10){
        rTime+="0"+newTime.getDate()+"日";
      }else{
        rTime+=newTime.getDate()+"日";
      }
      return rTime;
    }

    function more(obj) {
      if (!_hasNext) {
        return;
      }
      var _ori_cls = obj.className, _cls = obj.className + " load";
      obj.className = _cls;
      obj.innerHTML = "正在加载";
      <%--alert("<c:url value='/api/lost/list'/>");--%>
      $.post("<c:url value='/api/lost/list'/>", {
        'numPerPage': 10,
        'pageNum': _pageIndex + 1,
        'keywords':keywords
      }, function (resp) {
        if (resp && resp.succ) {
          var _wrap = $("#pr_list_body"), _data = resp.data.list, _len = _data.length;
          var _html = "";
//          console.info(_data);
//          alert(_data);
          for (var index = 0; index < _len; index++) {
            var _item = _data[index];
            /*var imageUrl = _item.image == null ?  '<c:url value="/resource/images/weixin/no_img.png"/>' : "data:image/jpg;base64,"+_item.image;
            var infoType = _item.infoType == 1 ? "<h3 class='lost'>" : "<h3 class='found'>";*/
            var url = '<c:url value="/api/lost/details/#"/>'.replace("#",_item.guid);
            var name = _item.lostname==null?"暂无":_item.lostname;
            var time = _item.crttimestr==null?"未知时间":_item.crttimestr;
            var address = _item.lostaddress==null?"暂无":_item.lostaddress;
            _html += "<li><div class='li_rt'><p><a href='"+url+"'>物品名称："+ name+"</a></p>"+
                    "<p><a href='"+url+"'>发布日期："+time+"</a></p><p><a href='"+url+"'>事发地点："+address+"</a></p></div></li>";
        }
          $(_html).appendTo(_wrap);
          obj.className = _ori_cls;
          obj.innerHTML = "加载成功";
          _hasNext = resp.hasNext;
          if (_hasNext) {
            obj.innerHTML = "加载更多";
            _pageIndex = _pageIndex + 1;
          } else {
            obj.innerHTML = "已加载全部";
          }
//                    obj.innerHTML = _hasNext ? "加载更多" : "已加载全部";
          setTimeout(function () {
            myScroll.refresh();
          }, 600);
        }
      }, "json");
    }
    function initPullRefresh() {
      _header = document.getElementById('pr_list_head');
      _headerOffset = _header ? _header.offsetHeight : 0;
      _footer = document.getElementById('pr_list_foot');
      _footerOffset = _footer ? _footer.offsetHeight : 0;
      myScroll = new iScroll('pr_wrapper', {
        useTransition: true, topOffset: _headerOffset, onRefresh: function () {
          if (_header && _header.className.match('loading')) {
            _header.className = '';
            _header.querySelector('.pr_list_head_label').innerHTML = '下拉刷新';
          } else if (_footer && _footer.className.match('loading')) {
            _footer.className = '';
            _footer.querySelector('.pr_list_foot_label').innerHTML = '上拉加载更多';
          }
        }, onScrollMove: function () {
          if (_header && this.y > 5 && !_header.className.match('flip')) {
            _header.className = 'flip';
            _header.querySelector('.pr_list_head_label').innerHTML = '松开刷新';
            this.minScrollY = 0;
          } else if (_header && this.y < 5 && _header.className.match('flip')) {
            _header.className = '';
            _header.querySelector('.pr_list_head_label').innerHTML = '下拉刷新';
            this.minScrollY = -_headerOffset;
          }
        }, onScrollEnd: function () {
          if (_header && _header.className.match('flip')) {
            _header.className = 'loading';
            _header.querySelector('.pr_list_head_label').innerHTML = '正在加载';
            pullRefresh();
          }
        }
      });
    }
    document.addEventListener('touchmove', function (e) {
      e.preventDefault();
    }, false);
    document.addEventListener('DOMContentLoaded', function () {
      setTimeout(initPullRefresh, 200);
    }, false);
  </script>
</head>
<body ontouchstart>

<%--<header class="ui-header ui-header-positive ui-border-b">
  <i class="ui-icon-return" onclick="gotoindex()"></i>
  <h1>失物寻物</h1>
</header>--%>

<section class="ui-container">
<div class="mart20"></div>
<div class="search_wrap">
  <div class="search_main">
    <div class="search_main_rt">
      <input type="button"/>
    </div>
    <form id="form1">
      <div class="search_main_lf">
        <input type="text" placeholder="物品名称查询" />
      </div>
    </form>
  </div>
</div>
<div style="clear: both;"></div>
<div id="pr_wrapper" style="top: 5rem;   bottom: 0rem;    position: absolute;    z-index: 1;    width: 100%;   overflow: auto;">
  <div id="pr_scroller">
    <div id="pr_list_head"><span class="pr_list_head_label">下拉刷新</span></div>
    <ul id="pr_list_body" class="swzl_ul ui-border-t">
      <c:forEach var="lostProperty" items="${pager.list}">
        <li>
          <div class="li_rt">
            <p><a href="<c:url value='/api/lost/details/${lostProperty.guid}'/>">物品名称：${lostProperty.lostname}</a></p>
            <p><a href="<c:url value='/api/lost/details/${lostProperty.guid}'/>">发布日期：${lostProperty.crttimestr}</a></p>
            <p><a href="<c:url value='/api/lost/details/${lostProperty.guid}'/>">事发地点：${lostProperty.lostaddress}</a></p>
          </div>
          <%--<div class="li_rt">
            <c:if test="${lostProperty.infoType==1}">
              <h3 class="lost">
            </c:if>
            <c:if test="${lostProperty.infoType!=1}">
              <h3 class="found">
            </c:if>
            <a href="<c:url value='/api/lost/details/${lostProperty.guid}'/>">${lostProperty.infoType == 1 ?"丢失":"捡拾"}&nbsp;&nbsp;${lostProperty.lostName==null?"暂无":lostProperty.lostName}</a></h3>
            <p><a href="<c:url value='/api/lost/details/${lostProperty.guid}'/>"></a></p>
            <p><a href="<c:url value='/api/lost/details/${lostProperty.guid}'/>">${lostProperty.lostAddress==null?"暂无":lostProperty.lostAddress}</a></p>
          </div>--%>
        </li>
      </c:forEach>
    </ul>
    <div style="clear: both;"></div>
    <c:if test="${pager.hasNext}">
      <div id="pr_list_foot"><a class="foot_icon" onclick="more(this);" href="#">加载更多</a></div>
    </c:if>
    <c:if test="${not pager.hasNext}">
      <div id="pr_list_foot"><a class="foot_icon" href="#">已加载全部</a></div>
    </c:if>
  </div>
</div>
</section>
</body>
</html>